﻿<%@ Page Language="C#" MasterPageFile="~/usercate/usercate.master" AutoEventWireup="true"
    CodeBehind="userCate.aspx.cs" Inherits="chatblog.usercate.userCate" Title="好友管理" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContentPlaceHolder" runat="server">
    <style type="text/css">
        .hiddenObject
        {
            display: none;
        }
        body
        {
            margin: 10px;
            padding: 10px;
        }
        body, h2, div, span, li
        {
            font-size: 12px;
        }
        .title01, .title02
        {
            color: #fff;
            font-weight: bold;
        }
        .UserCate
        {
            border: 12px solid #eee;
            width: 100%;
            padding: 4px;
            background: #fff;
        }
        h2
        {
            text-align: center;
            margin: 0px;
            padding: 0px;
            line-height: 22px;
        }
        .h2style
        {
            text-align: center;
            margin: 0px;
            padding: 0px;
            line-height: 22px;
        }
        .title01
        {
            width: 100%;
            height: 25px;
            background: #00ccff;
            cursor: pointer;
        }
        .title02
        {
            width: 100%;
            height: 25px;
            background-image:url('../img/head.gif');
            background-position:left;
            background-repeat:no-repeat;
            background-color:#FF9900;
            cursor: pointer;
        }
        .content
        {
            background: #eee;
            border-bottom: 2px solid #fff;
            overflow: hidden;
            color: #666;
            padding-left: 4px;
            padding-right: 4px;
            line-height: 18px;
        }
        .content a:link, .content a:visited
        {
            color: #666666;
            text-decoration: none;
        }
        .content a:hover
        {
            color: #FF6600;
            text-decoration: underline;
        }
        #CateTool
        {
            width: 100%;
            height: 22px;
            background-color: LightGray;
        }
        
        #bmenu ul, #GroupMenu ul
        {
            float: left;
            clear: right;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #bmenu ul ul, #GroupMenu ul ul
        {
            border-top: 0px;
            border-right: 0px;
        }
        #bmenu a, #GroupMenu a
        {
            width: 130px;
            display: block;
            text-decoration: none;
            text-align: left;
            padding: 3px 4px 3px 7px;
        }
        #bmenu a:hover, #GroupMenu a:hover
        {
            margin: 0px;
            padding: 2px 5px 2px 6px;
            background-color: #f1f1f1;
            text-decoration: none;
        }
        #bmenu li, #GroupMenu li
        {
            float: none;
            clear: right;
            height: 22px;
            width: 119px;
            padding-left: 10px;
        }
        #bmenu li ul li, #GroupMenu li ul li
        {
            float: none;
            clear: right;
            height: 22px;
            width: 109px;
            background: #CEE2FF;
            color: Black;
            padding-left: 10px;
        }
        #bmenu li ul li:hover, #GroupMenu li ul li:hover
        {
            float: none;
            height: 22px;
            width: 109px;
            background: #316AC5;
            color: White;
        }
        #bmenu li ul, #GroupMenu li ul
        {
            position: absolute;
            margin: -21px 0px 0px 119px;
            padding: 0;
            left: -9999em;
            width: 109px;
            font-weight: normal;
            display: block;
            border: 1px solid #CCCCCC;
            background: #CEE2FF;
        }
        #bmenu li ul a, #GroupMenu li ul a
        {
            width: 119px;
            text-align: left;
            margin: 0px;
        }
        #bmenu li:hover ul, #bmenu li.sfhover ul, #GroupMenu li:hover ul, #GroupMenu li.sfhover ul
        {
            left: auto;
            height: 22px;
        }
        #bmenu li:hover, #bmenu li.sfhover, #GroupMenu li:hover, #GroupMenu li.sfhover
        {
            border: 1px solid #CCC;
            height: 22px;
            background-color: #316AC5;
        }
        .editGroup
        {
            background-color: #99cc00;
            text-align: left;
            vertical-align: middle;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 10px;
        }
         div.sample_popup
        {
            z-index: +1;
        }
        div.menu_form_header
        {
            cursor: move;
        }
        div.sample_popup div.menu_form_header
        {
            border: 1px solid black;
            border-bottom: 0px;
            cursor: default;
            width: 200px;
            height: 20px;
            line-height: 19px;
            vertical-align: middle;
            background: url( '' ) no-repeat;
            text-decoration: none;
            font-family: "Times New Roman" , Serif;
            font-weight: 900;
            font-size: 13px;
            color: #206040;
        }
        div.sample_popup div.menu_form_body
        {
            border: 1px solid black;
            width: 200px;
            background: url( '' ) no-repeat left bottom;
        }
        div.sample_popup img.menu_form_exit
        {
            float: right;
            margin: 4px 5px 0px 0px;
            cursor: pointer;
        }
        div.sample_popup table
        {
            border-collapse: collapse;
            width: 100%;
        }
        div.sample_popup th
        {
            width: 1%;
            padding: 0px 5px 1px 0px;
            text-align: left;
            font-family: "Times New Roman" , Serif;
            font-weight: 900;
            font-size: 13px;
            color: #004060;
        }
        div.sample_popup td
        {
            width: 99%;
            padding: 0px 0px 1px 0px;
        }
        div.sample_popup form
        {
            margin: 0px;
            padding: 8px 10px 10px 10px;
        }
        div.sample_popup input.field
        {
            border: 1px solid #808080;
            width: 95%;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
        }
        div.sample_popup input.btn
        {
            margin-top: 2px;
            border: 1px solid #808080;
            background-color: #DDFFDD;
            font-family: Verdana, Sans-Serif;
            font-size: 11px;
        }
        a
        {
            color: Blue;
            text-decoration: none;
        }
    </style>
    <link href="css/contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="js/contextMenu.js" type="text/javascript"></script>

    <script src="js/PopupDiv.js" type="text/javascript"></script>

    <script type="text/javascript">      

        sfHover = function() {
            var sfEls = document.getElementById("bmenu").getElementsByTagName("LI");
            for (var i = 0; i < sfEls.length; i++) {
                if (sfEls[i].id == 'separator')
                    continue;
                sfEls[i].onmouseover = function() {
                    this.className += " sfhover";
                }
                sfEls[i].onmouseout = function() {
                    this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
                }
            }
        }
        window.onload = sfHover;

        // 验证是否为邮箱地址
        function verifyAddress(email)  
　　　　　{   
　　　　　　var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;  
　　　　　　flag = pattern.test(email);  
　　　　　　if(flag)  
　　　　　　{   
　　　　　　　return true;  
　　　　　　}  
　　　　　　else  
　　　　　　　{  
　　　　　　　　return false;  
　　　　　　　 }  
　　　　　 }  

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContentPlaceHolder" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="width: 100%; height: 60px; 
            background-image: url(../images/mylogo.gif);
        background-position: left; background-repeat: no-repeat;
        border-bottom-color: Gray; border-bottom-width: 1px;
        border-bottom-style: solid;">
    </div>
    我的好友
    <div id="UserCate" class="UserCate" style="width: 300px">
        <div id="DoorP" runat="server">
            
        </div>
        <hr />
        <div id="CateTool">
        </div>
    </div>
    <script type="text/javascript">
        var currentRenameGroup = null;
        var currentAddGroup = null;
        var newGroupid = "add";
        var onum = 0;
        var closeState=new Array();
        var ch=200;
        function $(id){if(document.getElementById(id)){return document.getElementById(id);}else{alert("没有找到!")}}
        function $tag(id,tagName){return $(id).getElementsByTagName(tagName)}        
        function showMe(Cid,Oid){var h=parseInt(Ds[Cid].style.height);var h2=parseInt(Ds[Oid].style.height);var dH=ch;if(h>0){h=h-Math.ceil(h/3);Ds[Cid].style.height=h+"px";};if(h2<dH){h2=h2+Math.ceil((dH-h2)/3);Ds[Oid].style.height=h2+"px";};if(h<=0&&h2>=dH){clearTimeout(closeState[Cid]);return false;};closeState[Cid] = setTimeout("showMe("+Cid+","+Oid+")");}

        var Ds = $tag("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP", "div");
        var Ts = $tag("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP", "h2");         
        //        if(Ds.length != Ts.length){alert("初始化失败!");}
        for(var i=0;i<Ds.length;i++){
        if(i==onum){Ds[i].style.height=ch+"px";Ts[i].className="title02";}else{Ds[i].style.height="0px";Ts[i].className="title02";}
        Ts[i].value=i;
        Ts[i].onclick=function(){if(onum==this.value){return false;};
        Ts[onum].className="title02";
        Ts[this.value].className="title02";
        for(var i=0;i<closeState.length;i++){clearTimeout(closeState[i]);}
           showMe(onum,this.value);
           onum=this.value;
          }
      }

      function InitAgain() {
          Ds = $tag("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP", "div");
          Ts = $tag("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP", "h2");
          if (onum >= Ts.length)
              onum = 0;
          for (var i = 0; i < Ds.length; i++) {
              if (i == onum) { Ds[i].style.height = ch + "px"; Ts[i].className = "title02"; } else { Ds[i].style.height = "0px"; Ts[i].className = "title02"; }
              Ts[i].value = i;
              Ts[i].onclick = function() {
                  if (onum == this.value) { return false; };
                  Ts[onum].className = "title02";
                  Ts[this.value].className = "title02";
                  for (var i = 0; i < closeState.length; i++) { clearTimeout(closeState[i]); }
                  showMe(onum, this.value);
                  onum = this.value;
              } 
          }
      }
      function RefreshGroupDiv() {
          var doorPDiv = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP");
          doorPDiv.innerHTML = chatblog.usercate.userCate.GetDoorPInnerHtml().value;
          InitAgain();
          currentAddGroup = null;
          currentRenameGroup = null;
      }


      function saveH2(h2Titleid, titleInputid) {
          var titleInput = document.getElementById(titleInputid);
          var result = chatblog.usercate.userCate.AddGroup(titleInput.value);
          RefreshGroupDiv();               
      }
      function renameH2(groupid, oldName, newNameTextBox) {
          var result = chatblog.usercate.userCate.UpdateGroup(groupid, oldName, newNameTextBox.value);
          RefreshGroupDiv();
      }

      function addGroupOperate() {
          if (currentAddGroup != null) {
              alert("已经打开一个新建的组，请继续编辑！");
              return;
          }  
            
          newGroupid += "1";
          var doorPDiv = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP");
          var h2Ele = document.createElement("H2");
          
          h2Ele.id = newGroupid;
          h2Ele.innerHTML = "新建组：<input  id=\"titleInput\" type =\"text\" value=\"\" style =\" width :40%\"/><input id=\"Button2\" type=\"button\" value=\"保存\"  onclick =\"saveH2('" + newGroupid + "','titleInput');\"/><input id=\"Button3\" type=\"button\" value=\"取消\" onclick=\"RefreshGroupDiv();\"/>";
          doorPDiv.appendChild(h2Ele);
          h2Ele.className = "editGroup";
          currentAddGroup = h2Ele;
      }

      function renameGroupOperate(cobj) {
          if (currentRenameGroup != null) {
              alert("已经存在正在重命名的组，请结束上一操作后再新的重命名！");
              return;
          }
          var oldName = cobj.childNodes[0].nodeValue;
          cobj.innerHTML = "组重命名：<input  id=\"titleInput\" type =\"text\" value=\"" + oldName + "\" style =\" width :40%\"/><input id=\"Button2\" type=\"button\" value=\"保存\"  onclick =\"renameH2('" + cobj.id + "','" + oldName + "',titleInput)\"/><input id=\"Button3\" type=\"button\" value=\"取消\" onclick=\"RefreshGroupDiv();\"/>";
          cobj.className = "editGroup";
          currentRenameGroup = cobj;
      }
      
      function addUser() {
          var groupselect=document.getElementById('GroupListSelect');
          var usertextbox = document.getElementById('NewUserText');
          var isemail = verifyAddress(usertextbox.value);
          if (!isemail) {
              alert("对不起,您输入好友的Email："+usertextbox .value +" 格式不正确,请重新输入!");
              return;
          }
          var nicktextBox= document.getElementById('UserNickText');
          var selectedIndex = groupselect.selectedIndex;
          var result = chatblog.usercate.userCate.AddGroupUser(groupselect[selectedIndex].id, usertextbox.value, nicktextBox.value , "");
           usertextbox.value = "";
           nicktextBox.value = "";
           document.getElementById('popup').style.display = 'none';
          RefreshGroupDiv();
          if (result.value == true)
              alert("添加成功!");
          else
              alert("添加失败!");
          
         

      }

      function changeGroupId(userid, oldGroupid, newGroupid) {
          var result = chatblog.usercate.userCate.UpdateUserGroup(userid, oldGroupid, newGroupid);
          var doorPDiv = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP");
          doorPDiv.innerHTML = chatblog.usercate.userCate.GetDoorPInnerHtml().value;
          InitAgain();
      }
    </script>

    <%--组内用户 右键菜单--%>
    <div id="bmenu" style="position: absolute; display: none; top: 0px; left: 0px; width: 130px;
        margin: 0px; padding: 2px; border: 1px solid #cccccc; background-color: #CEE2FF;">
        <ul>
            <li id="del">删除</li>
            <li id="edit">更改分组为
                <ul id="GroupUl">
                </ul>
            </li>
            <li class="separator" style="height: 1px; vertical-align: middle;" id="separator">
            </li>
            <li id="add">添加好友</li>
            <li id="prop">查看详情</li>
        </ul>
    </div>
    <div id="GroupMenu" style="position: absolute; display: none; top: 0px; left: 0px;
        width: 130px; margin: 0px; padding: 2px; border: 1px solid #cccccc; background-color: #CEE2FF;">
        <ul>
            <li id="addGroup">添加组</li>
            <li id="addUser">添加好友</li>
            <li class="separator" style="height: 1px; vertical-align: middle;" id="Li3"></li>
            <li id="deleteGroup">删除组</li>
            <li id="renameGroup">重命名该组</li>
        </ul>
    </div>
    <br />
    <div class="sample_popup" id="popup" style="visibility: hidden; background-color: #99cc00;
        display: none;">
        <div class="menu_form_header" id="popup_drag">
            <table>
                <tr>
                    <td>
                        添加好友：
                    </td>
                    <td>
                        <img alt="" class="menu_form_exit" id="popup_exit" src="http://codefans.net/jscss/demoimg/200904/closes.png" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="menu_form_body">
            <div>
                您好友的Email：<input id="NewUserText" type="text" style="width: 50%" />
            </div>
            <div>
                您好友的昵 称：<input id="UserNickText" type="text" style="width: 50%" />
            </div>
            <div id="GroupListDiv">
            </div>
            <div style="text-align: center; width: 100%">
                <input id="AddButton" type="button" value="增加" onclick="addUser();" />
                <input id="CancelButton" type="button" value="取消" onclick="document.getElementById('popup').style.display='none';" />
            </div>
            <%-- <input id="GroupIdHidden" type="hidden"  />--%>
        </div>
    </div>
    <%--右键菜单--%>

    <script type="text/javascript">

         // 组名右键菜单
         var groupmenu = new contextMenu(
            {
                menuID: "GroupMenu",
                targetEle: "title02" //
            },
            {
                bindings: {
                    'addGroup': function(o) {
                        addGroupOperate();
                    },
                    'addUser': function(o) {
                        var groupListDiv = document.getElementById('GroupListDiv');
                        groupListDiv.innerHTML = chatblog.usercate.userCate.GetGroupListSelectHtml(o.id).value;
                        popup_show();
                        
                    },
                    'deleteGroup': function(o) {
                        var groupUserCount = chatblog.usercate.userCate.GetGroupUserList(o.id).value;
                        if (groupUserCount > 0) {
                            alert("对不起，好友组：" + o.childNodes[0].nodeValue + " 中有好友，请在清空该组中的好友之后再删除该组！");
                            return;
                        }
                        if (confirm("删除组：" + o.childNodes[0].nodeValue + " ?") == true) {
                            var result = chatblog.usercate.userCate.DeleteGroup(o.id, o.childNodes[0].nodeValue);
                            var doorPDiv = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP");
                            doorPDiv.innerHTML = chatblog.usercate.userCate.GetDoorPInnerHtml().value;
                            InitAgain();
                            alert("已删除");
                        }
                    },
                    'renameGroup': function(o) {
                        renameGroupOperate(o);
                    }
                }
            }
        );

         groupmenu.buildContextMenu();   
        
        // 组内用户右键菜单
         var cmenu = new contextMenu(
        {
            menuID: "bmenu",
            targetEle: "contextMenu0"
        },
	 	    {
	 	        bindings: {
	 	            'edit': function(o) {
	 	            },
	 	            'del': function(o) {
	 	                if (confirm("删除 " + o.innerText + " ?") == true) {
	 	                    var result = chatblog.usercate.userCate.DeleteUser(o.innerHTML, o.id);
	 	                    var doorPDiv = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP");
	 	                    doorPDiv.innerHTML = chatblog.usercate.userCate.GetDoorPInnerHtml().value;
	 	                    InitAgain();
	 	                    alert("已删除");
	 	                }
	 	            },
	 	            'prop': function(o) { alert("查看详细 组ID：" + o.id + "；用户ID：" + o.innerHTML); },
	 	            'add': function(o) {
	 	                var groupListDiv = document.getElementById('GroupListDiv');
	 	                var result = chatblog.usercate.userCate.GetGroupListSelectHtml(o.id);
	 	                groupListDiv.innerHTML = result.value;
	 	                popup_show();
	 	            }
	 	        }
	 	    }
 	    );

	   cmenu.buildContextMenu();


    </script>
</asp:Content>
